/**
 * Created by zc180411-05 on 2018/5/8.
 */
$(function() {
	var myRate1 = 1000;
	var option = {
		backgroundColor : '#323c48',
		title : [ {
			x : "12%",
			bottom : 20,
			text : '累计办结',
			textStyle : {
				fontWeight : 'normal',
				fontSize : 20,
				color : "#fff"
			},
		}, {
			x : "42%",
			bottom : 20,
			text : '累计受理数',

			textStyle : {
				fontWeight : 'normal',
				fontSize : 20,
				color : "#fff"
			},
		}, {
			x : "75%",
			bottom : 20,
			text : '未处理',
			textStyle : {
				fontWeight : 'normal',
				fontSize : 20,
				color : "#fff"
			},
		} ],
		tooltip : {
			show : true,

		},
		series : [
				{
					type : 'gauge',
					center : [ '50%', '55%' ], // 默认全局居中
					radius : '70%',
					splitNumber : 10, // 刻度数量
					min : 0,
					max : 1000,
					startAngle : 200,
					endAngle : -20,
					clockwise : true,
					axisLine : {
						show : true,
						lineStyle : {
							width : 2,
							shadowBlur : 0,
							color : [ [ 1, '#03B7C9' ] ]
						}
					},
					axisTick : {
						show : true,
						lineStyle : {
							color : '#03B7C9',
							width : 1
						},
						length : -15,
						splitNumber : 10
					},
					splitLine : {
						show : true,
						length : -20,
						lineStyle : {
							color : '#03B7C9',
						}
					},
					axisLabel : {
						distance : -20,
						textStyle : {
							color : "#03B7C9",
							fontSize : "16",// 中盘刻度数字体大小
							fontWeight : "bold"
						}
					},
					pointer : { // 仪表盘指针
						show : 0
					},
					detail : {
						show : false
					},
					data : [ {
						name : "",
						value : myRate1
					} ]
				},
				{
					startAngle : 200,
					endAngle : -20,
					type : 'gauge',
					center : [ '50%', '55%' ], // 默认全局居中
					radius : '70%',
					min : 0,
					max : 1000,
					splitNumber : 0,
					axisLine : { // 坐标轴线
						lineStyle : {
							color : [ [ 0.66, '#dddddd' ], [ 1, '#dddddd' ] ], // 属性lineStyle控制线条样式
							width : 4
						}
					},

					axisLabel : { // 坐标轴小标记
						textStyle : { // 属性lineStyle控制线条样式
							fontWeight : 'bolder',
							fontSize : 15,
							color : 'rgba(30,144,255,0)',
						}
					},
					splitLine : { // 分隔线
						length : 10, // 属性length控制线长
						lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
							width : 0,
							color : '#444'
						}
					},
					pointer : { // 分隔线 指针
						color : '#666666',
						width : 0,
						length : 230
					},
					detail : {
						show : false
					},

				},
				{
					name : '累计受理',
					type : 'gauge',
					startAngle : 200,
					endAngle : -20,
					radius : '70%',
					center : [ '50%', '55%' ], // 默认全局居中

					min : 0,
					max : 1000,

					axisLine : {
						show : false,
						lineStyle : {
							width : 25,
							shadowBlur : 0,
							color : [ [ 0.2, '#00FAFC' ], [ 0.4, '#3BD542' ],
									[ 0.6, '#E3F424' ], [ 0.8, '#7E48DA' ],
									[ 1, '#E531A8' ] ]
						}
					},
					axisTick : {
						show : false,

					},
					splitLine : {
						show : false,
						length : 20,

					},

					axisLabel : {
						show : false
					},
					pointer : {
						show : true,
					},
					detail : {
						show : true,
						offsetCenter : [ 0, '40%' ],
						textStyle : {
							fontSize : 30
						}
					},
					itemStyle : {
						normal : {
							color : "#03B7C9",

						}
					},
					data : [ {
						value : 436
					} ]
				},
				{
					type : 'gauge',
					center : [ '20%', '55%' ], // 默认全局居中
					radius : '40%',
					splitNumber : 10, // 刻度数量
					min : 0,
					max : 1000,
					endAngle : 45,
					clockwise : true,
					axisLine : {
						show : true,
						lineStyle : {
							width : 2,
							shadowBlur : 0,
							color : [ [ 1, '#03B7C9' ] ]
						}
					},
					axisTick : {
						show : true,
						lineStyle : {
							color : '#03B7C9',
							width : 1
						},
						length : -15,
						splitNumber : 10
					},
					splitLine : {
						show : true,
						length : -20,
						lineStyle : {
							color : '#03B7C9',
						}
					},
					axisLabel : {
						distance : -20,
						textStyle : {
							color : "#03B7C9",
							fontSize : "12",
							fontWeight : "bold"
						}
					},
					pointer : { // 仪表盘指针
						show : 0
					},
					detail : {
						show : false
					},
					data : [ {
						name : "",
						value : myRate1
					} ]
				},
				{
					type : 'gauge',
					center : [ '20%', '55%' ], // 默认全局居中
					radius : '40%',
					min : 0,
					max : 1000,
					endAngle : 45,
					splitNumber : 0,
					axisLine : { // 坐标轴线
						lineStyle : {
							color : [ [ 0.66, '#dddddd' ], [ 1, '#dddddd' ] ], // 属性lineStyle控制线条样式
							width : 4
						}
					},

					axisLabel : { // 坐标轴小标记
						textStyle : { // 属性lineStyle控制线条样式
							fontWeight : 'bolder',
							fontSize : 16,
							color : 'rgba(30,144,255,0)',
						}
					},
					splitLine : { // 分隔线
						length : 10, // 属性length控制线长
						lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
							width : 0,
							color : '#444'
						}
					},
					pointer : { // 分隔线 指针
						color : '#666666',
						width : 0,
						length : 230
					},
					detail : {
						show : false
					},

				},
				{
					name : '累计办结',
					type : 'gauge',
					endAngle : 45,
					radius : '40%',
					center : [ '20%', '55%' ], // 默认全局居中

					min : 0,
					max : 1000,

					axisLine : {
						show : false,
						lineStyle : {
							width : 25,
							shadowBlur : 0,
							color : [ [ 0.2, '#00FAFC' ], [ 0.4, '#3BD542' ],
									[ 0.6, '#E3F424' ], [ 0.8, '#7E48DA' ],
									[ 1, '#E531A8' ] ]
						}
					},
					axisTick : {
						show : false,

					},
					splitLine : {
						show : false,
						length : 20,

					},

					axisLabel : {
						show : false
					},
					pointer : {
						show : true,
					},
					detail : {
						show : true,
						offsetCenter : [ 0, '40%' ],
						textStyle : {
							fontSize : 30
						}
					},
					itemStyle : {
						normal : {
							color : "#03B7C9",

						}
					},
					data : [ {
						value : 245
					} ]
				},
				{
					type : 'gauge',
					center : [ '80%', '55%' ], // 默认全局居中
					radius : '40%',
					splitNumber : 10, // 刻度数量
					min : 0,
					max : 1000,
					startAngle : 140,
					endAngle : -45,
					clockwise : true,
					axisLine : {
						show : true,
						lineStyle : {
							width : 2,
							shadowBlur : 0,
							color : [ [ 1, '#03B7C9' ] ]
						}
					},
					axisTick : {
						show : true,
						lineStyle : {
							color : '#03B7C9',
							width : 1
						},
						length : -15,
						splitNumber : 10
					},
					splitLine : {
						show : true,
						length : -20,
						lineStyle : {
							color : '#03B7C9',
						}
					},
					axisLabel : {
						distance : -20,
						textStyle : {
							color : "#03B7C9",
							fontSize : "12",// 右盘刻度数字体大小
							fontWeight : "bold"
						}
					},
					pointer : { // 仪表盘指针
						show : 0
					},
					detail : {
						show : false
					},
					data : [ {
						name : "",
						value : myRate1
					} ]
				},
				{
					type : 'gauge',
					center : [ '80%', '55%' ], // 默认全局居中
					radius : '40%',
					min : 0,
					max : 1000,
					startAngle : 140,
					endAngle : -45,
					splitNumber : 0,
					axisLine : { // 坐标轴线
						lineStyle : {
							color : [ [ 0.66, '#dddddd' ], [ 1, '#dddddd' ] ], // 属性lineStyle控制线条样式
							width : 4
						}
					},

					axisLabel : { // 坐标轴小标记
						textStyle : { // 属性lineStyle控制线条样式
							fontWeight : 'bolder',
							fontSize : 16,
							color : 'rgba(30,144,255,0)',
						}
					},
					splitLine : { // 分隔线
						length : 10, // 属性length控制线长
						lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
							width : 0,
							color : '#444'
						}
					},
					pointer : { // 分隔线 指针
						color : '#666666',
						width : 0,
						length : 230
					},
					detail : {
						show : false
					},

				},
				{
					name : '未处理',
					type : 'gauge',
					startAngle : 140,
					endAngle : -45,
					radius : '40%',
					center : [ '80%', '55%' ], // 默认全局居中

					min : 0,
					max : 1000,

					axisLine : {
						show : false,
						lineStyle : {
							width : 25,
							shadowBlur : 0,
							color : [ [ 0.2, '#00FAFC' ], [ 0.4, '#3BD542' ],
									[ 0.6, '#E3F424' ], [ 0.8, '#7E48DA' ],
									[ 1, '#E531A8' ] ]
						}
					},
					axisTick : {
						show : false,

					},
					splitLine : {
						show : false,
						length : 20,

					},

					axisLabel : {
						show : false
					},
					pointer : {
						show : true,
					},
					detail : {
						show : true,
						offsetCenter : [ 0, '40%' ],
						textStyle : {
							fontSize : 30
						}
					},
					itemStyle : {
						normal : {
							color : "#03B7C9",

						}
					},
					data : [ {
						value : 135
					} ]
				} ]
	};

	// zsk new
	var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [

	{
		offset : 0,
		color : '#13FF39'
	},

	{
		offset : 0.2,
		color : '#2CB7C7'
	},

	{
		offset : 0.4,
		color : '#1DB2DD'
	},

	{
		offset : 0.6,
		color : '#2D89ED'
	},

	{
		offset : 0.8,
		color : '#7765B4'
	},

	{
		offset : 1,
		color : '#EA2020'
	} ]);

	var newOption = {
		backgroundColor : 'black',
		series : [ {
			name : '总加工数',
			type : 'gauge',
			z : 3,
			min : 0,
			max : 100,
			splitNumber : 10,
			radius : '80%',
			axisLine : { // 坐标轴线
				lineStyle : { // 属性lineStyle控制线条样式
					width : 15,
					color : [ [ 1, axislineColor ] ],
				}
			},
			axisTick : {
				show : false
			},
			axisLabel : {
				show : false
			},
			splitLine : { // 分隔线
				show : false
			},
			pointer : {
				show : false
			},
			title : {
				offsetCenter : [ 0, 18 ],
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : 'white',
					fontSize : 30
				}
			},
			detail : {
				offsetCenter : [ 0, -15 ],
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : '#06F675',
					fontSize : 30
				},
				formatter : function(value) {
					return value;
				},
			},
			itemStyle : {
				normal : {
					color : "#00CAFC",
				}
			},
			data : [ {
				value : 5869,
				name : '总生产量'
			} ]
		}, {
			name : '',
			type : 'gauge',
			z : 3,
			min : 0,
			max : 100,
			splitNumber : 10,
			radius : '65%',
			axisLine : { // 坐标轴线
				show : false,
				lineStyle : { // 属性lineStyle控制线条样式
					width : 0,
					color : [ [ 1, axislineColor ] ],
				}
			},
			title : {
				show : false
			},
			detail : {
				show : false
			},
			axisTick : {
				show : true,
				length : 15,
				lineStyle : {
					width : 3,
					color : 'rgb(53,93,100)'
				}
			},
			axisLabel : {
				show : false
			},
			splitLine : { // 分隔线
				show : false
			}
		}, {
			name : '今日生产量',
			type : 'gauge',
			center : [ '18%', '55%' ], // 默认全局居中
			endAngle : 45,
			z : 2,
			min : 0,
			max : 100,
			splitNumber : 6,
			radius : '60%',
			axisLine : { // 坐标轴线
				lineStyle : { // 属性lineStyle控制线条样式
					width : 15,
					color : [ [ 1, axislineColor ] ],
				}
			},
			axisTick : {
				show : false
			},
			axisLabel : {
				show : false
			},
			splitLine : { // 分隔线
				show : false
			},
			pointer : {
				show : false
			},
			title : {
				offsetCenter : [ 0, 10 ],
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : 'white',
					fontSize : 15
				}
			},
			detail : {
				offsetCenter : [ 0, -10 ],
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : '#06F675',
					fontSize : 20
				},
				formatter : function(value) {
					return value;
				},
			},
			itemStyle : {
				normal : {
					color : "#00CAFC",
				}
			},
			data : [ {
				value : 28,
				name : '今日生产量'
			} ]
		}, {
			name : '',
			type : 'gauge',
			center : [ '18%', '55%' ], // 默认全局居中
			endAngle : 45,
			z : 2,
			min : 0,
			max : 100,
			splitNumber : 6,
			radius : '45%',
			axisLine : { // 坐标轴线
				show : false,
				lineStyle : { // 属性lineStyle控制线条样式
					width : 0,
					color : [ [ 1, axislineColor ] ],
				}
			},
			title : {
				show : false
			},
			detail : {
				show : false
			},
			axisTick : {
				show : true,
				length : 15,
				lineStyle : {
					width : 3,
					color : 'rgb(53,93,100)'
				}
			},
			axisLabel : {
				show : false
			},
			splitLine : { // 分隔线
				show : false
			}
		}, {
			name : '今日废品量',
			type : 'gauge',
			center : [ '82.4%', '55%' ], // 默认全局居中
			startAngle : 135,
			endAngle : -45,
			z : 2,
			min : 0,
			max : 100,
			splitNumber : 6,
			radius : '60%',
			axisLine : { // 坐标轴线
				lineStyle : { // 属性lineStyle控制线条样式
					width : 15,
					color : [ [ 1, axislineColor ] ],
				}
			},
			axisTick : {
				show : false
			},
			axisLabel : {
				show : false
			},
			splitLine : { // 分隔线
				show : false
			},
			pointer : {
				show : false
			},
			title : {
				offsetCenter : [ 0, 10 ],
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : 'white',
					fontSize : 15
				}
			},
			detail : {
				offsetCenter : [ 0, -10 ],
				textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					color : '#FF8808',
					fontSize : 20
				},
				formatter : function(value) {
					return value;
				},
			},
			itemStyle : {
				normal : {
					color : "#00CAFC",
				}
			},
			data : [ {
				value : 3,
				name : '今日废品量'
			} ]
		}, {
			name : '',
			type : 'gauge',
			center : [ '82.4%', '55%' ], // 默认全局居中
			startAngle : 140,
			endAngle : -45,
			z : 2,
			min : 0,
			max : 100,
			splitNumber : 6,
			radius : '45%',
			axisLine : { // 坐标轴线
				show : false,
				lineStyle : { // 属性lineStyle控制线条样式
					width : 0,
					color : [ [ 1, axislineColor ] ],
				}
			},
			title : {
				show : false
			},
			detail : {
				show : false
			},
			axisTick : {
				show : true,
				length : 15,
				lineStyle : {
					width : 3,
					color : 'rgb(53,93,100)'
				}
			},
			axisLabel : {
				show : false
			},
			splitLine : { // 分隔线
				show : false
			}
		} ]
	};
	var myChart = null;
	var dom = document.getElementById("driverPanel");
	myChart = echarts.init(dom);
	myChart.setOption(newOption);

	// 完成率
	var percent = 68;
	function getData() {
		return [ {
			name : '已完成',
			value : percent,
			itemStyle : {
				normal : {
					color : '#fb358a',
					shadowBlur : 10,
					shadowColor : '#fb358a'
				}
			}
		}, {
			name : '未完成',
			value : 100 - percent,
			itemStyle : {
				normal : {
					color : '#aaa'
				}
			}
		} ];
	}

	var finishOption = {
		// title : {
		// text: '完成率统计',
		// subtext: '纯属虚构',
		// x:'center'
		// },
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b}: {c} ({d}%)"
		},
		backgroundColor : '#162a5f',
		legend : {
			orient : 'vertical',
			x : 'right',
			data : [ '已完成', '未完成' ],
			textStyle : {
				fintSize : '9',
				color : 'white'
			}
		},
		series : [ {
			name : '完成率',
			type : 'pie',
			radius : [ '50%', '65%' ],
			label : {
				normal : {
					formatter : '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{per|{d}%}  ',
					// formatter: '{d} %',
					backgroundColor : '#eee',
					borderColor : '#aaa',
					borderWidth : 1,
					borderRadius : 10,
					// shadowBlur:3,
					// shadowOffsetX: 2,
					// shadowOffsetY: 2,
					// shadowColor: '#999',
					// padding: [0, 7],
					rich : {
						a : {
							fontSize : 10,
							color : 'black',
							lineHeight : 20,
							align : 'center'
						},
						// abg: {
						// backgroundColor: '#333',
						// width: '100%',
						// align: 'right',
						// height: 22,
						// borderRadius: [4, 4, 0, 0]
						// },
						hr : {
							fontSize : 10,
							borderColor : '#aaa',
							width : '100%',
							borderWidth : 0.5,
							height : 0
						},
						b : {
							fontSize : 10,
							//color : '#aaa',
							lineHeight : 30
						},
						per : {
							fontSize : 12,
							color : 'white',
							backgroundColor : '#334455',
							padding : [ 2, 4],
							borderRadius : 2
						}
					}
				},
				emphasis : {
					show : true,
					textStyle : {
						fontSize : '10',
						fontWeight : 'bold'
					}
				}
			},
			data : getData()
		} ]
	};

	var finishChart = null;
	var finishDom = document.getElementById("finishPanel");
	finishChart = echarts.init(finishDom);
	finishChart.setOption(finishOption);

	// 良品不良品对比
	var compareOption = {
		// backgroundColor : 'white',#3398DB #D53A35 #2a6894
		color : [ '#2a6894', '#aaa' ],
		title : {
			// text : '本月各分公司横向对比',
			textStyle : {
				color : '#fff'
			}
		},
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				// type : 'cross',
				type : 'shadow',
				crossStyle : {
					color : '#999'
				}
			}
		},
		// 工具按钮展示
		// toolbox : {
		// feature : {
		// dataView : {
		// show : true,
		// readOnly : false
		// },
		// magicType : {
		// show : true,
		// type : [ 'line', 'bar' ]
		// },
		// restore : {
		// show : true
		// },
		// saveAsImage : {
		// show : true
		// }
		// },
		// iconStyle : {
		// normal : {
		// // color : 'white',// 设置颜色
		// borderColor : 'white'//图标颜色
		// }
		// },
		// emphasis:{
		// iconStyle: {
		// borderColor: '#22bb22'//鼠标划过图标颜色
		// },
		// }
		// },
		grid : {
			borderWidth : 1,
			top : 50,
			bottom : 25,
			textStyle : {
				color : "white"
			}
		},
		legend : {
			data : [ '良品', '不良品' ],
			textStyle : {
				color : '#fff'
			}
		},
		xAxis : [ {
			type : 'category',
			data : [ '深圳公司', '无锡公司', '东莞公司', '西安公司', '其他公司' ],
			axisPointer : {
				type : 'shadow'
			},
			axisLine : {
				lineStyle : {
					color : 'white'
				}
			}
		} ],
		yAxis : [ {
			show : false,
			type : 'value',
			name : '良品',
			min : 0,
			max : 80,
			interval : 20,
			axisLabel : {
				formatter : '{value}'
			}
		}, {
			show : false,
			type : 'value',
			name : '不良品',
			min : 0,
			max : 200,
			interval : 50,
			axisLabel : {
				formatter : '{value}'
			}
		}

		],
		series : [ {
			name : '良品',
			type : 'bar',
			data : [ 90, 80, 95, 96, 85 ]
		}, {
			name : '不良品',
			type : 'bar',
			yAxisIndex : 1,
			data : [ 20, 10, 5, 6, 15 ]
		} ]
	};
	var compareChart = null;
	var compareDom = document.getElementById("comparePanel");
	compareChart = echarts.init(compareDom);
	compareChart.setOption(compareOption);

	// 图片随窗口大小自适应
	window.onresize = function() {
		myChart.resize()
		finishChart.resize()
		compareChart.resize()
	}
})